<template>
	<div class="detail">
		<div class="detailTop">
			<!-- 轮播图  卡片模式 滑块高度 自动轮播间隔 是否开启循环播放 是否显示指示器-->
			<van-swipe type="card" :height="400" :autoplay="3000" :loop="true" :show-indicators="false">
				<van-swipe-item v-for="images in images" :key="images">
					<van-image fit="cover" :src="images" />
				</van-swipe-item>
			</van-swipe>
			<i class="fas fa-angle-left" @click="goBack" />
			<div class="detailInfo">
				<div class="detailPrice">
					<div class="priceFu">￥</div>
					<div class="pricePr">1.98</div>
					<!-- <div class="pricePr">{{goodsDetail.price}}</div> -->
				</div>
				<div class="sales">已售999</div>
				<!-- <div class="sales">已售{{goodsDetail.num}}</div> -->
			</div>
			<div class="detailName">红薯叶 每斤</div>
			<!-- <div class="detailName">{{goodsDetail.name}}</div> -->
		</div>
		<div class="detailFoot">
			<div class="item add">加入购物车</div>
			<div class="item buy">立即购买</div>
		</div>
	</div>
</template>

<script setup>
	import {
		useRouter,
		useRoute,
		// onActivated
	} from 'vue-router'
	let router = useRouter()
	// 点击返回
	const goBack = () => {
		router.back()
	}
	// 轮播图
	import {
		ref,
		onMounted,
		onActivated
	} from 'vue'
	let images = ref(['/images/goods-1.jpg', '/images/goods-6.jpg'])
	// 数据库数据渲染
	// import http from '@/common/api/request.js'
	// onMounted(() => {
	// 	goData()
	// })
	// let route = useRoute()
	// let goodsDetail = ref({})
	// let id = ref(0)
	// const goData = async () => {
	//  let goodsId = ref(route.query.id)
	// 	let res = await http.$axios({
	// 		url: '/api/index/goods/id',
	// 		params: {
	// 			id: goodsId.value
	// 		}
	// 	})
	// 	console.log('详情数据', res)
	// 	goodsDetail.value=res
	// }
	// onActivated(() => {
	// 	// 判断当前url里的id和之前的id是否一致
	// 	if (route.query.id !== id.value) {
	// 		goData()
	// 		id.value = route.query.id
	// 	}
	// })
</script>

<style scoped>
	.fa-angle-left {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0.2rem 0.3rem;
		font-size: 20px;
		/* color: #999; */
	}

	.detailInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		padding: 5px 10px;
	}

	.detailPrice {
		display: flex;
		align-items: center;
	}

	.pricePr {
		font-size: 30px;
		font-weight: bold;
	}

	.detailName {
		font-size: 18px;
		padding: 0 10px;
	}

	.detailFoot {
		width: 100%;
		height: 40px;
		line-height: 40px;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: flex-end;
		background-color: white;
	}

	.detailFoot .item {
		width: 50%;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.detailFoot .add {
		background-color: #ffeeee;
		color: #ff667e;
	}

	.detailFoot .buy {
		background-color: #ff667e;
		color: white;
	}
</style>